import { memo, useState } from 'react'
import styles from './index.module.scss'
import useLoadQuestionData from '@/hooks/useLoadQuestionData'
import useGetPageInfo from '@/hooks/useGetPageInfo'
import { Spin, Result, Button } from 'antd'
import { useNavigate } from 'react-router-dom'
import { useTitle } from 'ahooks'
import StateHeader from './StatHeader'
import ComponentList from './ComponentList'
import PageState from './PageStat'
import ChartState from './ChartStat'

const Stat = memo(() => {
  const { loading } = useLoadQuestionData()
  const { title, isPublished } = useGetPageInfo()
  const nav = useNavigate()

  useTitle(`问卷统计-${title}`)

  const [selectedComponentId, setSelectedComponentId] = useState('')
  const [selectedComponentType, setSelectedComponentType] = useState('')

  const LoadingElem = () => (
    <div
      className={styles.loading}
      style={{
        textAlign: 'center',
        marginTop: '100px',
      }}
    >
      <Spin size="large" />
    </div>
  )

  const contentElem = () => {
    if (typeof isPublished === 'boolean' && !isPublished) {
      return (
        <Result
          status="warning"
          title="该页面尚未发布"
          extra={
            <Button type="primary" onClick={() => nav(-1)}>
              返回上一页
            </Button>
          }
        />
      )
    }
    return (
      <div className={styles.content}>
        <div className={styles.left}>
          <ComponentList
            selectedComponentId={selectedComponentId}
            setSelectedComponentId={setSelectedComponentId}
            setSelectedComponentType={setSelectedComponentType}
          />
        </div>
        <div className={styles.main}>
          <PageState
            selectedComponentId={selectedComponentId}
            setSelectedComponentId={setSelectedComponentId}
            setSelectedComponentType={setSelectedComponentType}
          />
        </div>
        <div className={styles.right}>
          <ChartState
            selectedComponentId={selectedComponentId}
            selectedComponentType={selectedComponentType}
          />
        </div>
      </div>
    )
  }

  return (
    <div className={styles.container}>
      <StateHeader />
      <div className={styles['content-wrapper']}>
        {loading && <LoadingElem />}
        {!loading && contentElem()}
      </div>
    </div>
  )
})

export default Stat
